<template>
    <div>
        <div></div>
        <ul class="menu">
            <li v-for="item in menu_list" :key="item.id"> 
                <i v-if="item.pId == null" v-on:click="setMenu(item.nId)">
                    <span>{{item.name}}</span>
                </i>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "top",
    props: ["value"],
    data: function () {
        return {
            valueContent: 'top',
            menu_list : null,
        }
    },
    methods : {
        init : function () {
            this.$http.post("api/menu/menu_list",).then(res => {
                this.menu_list = res.data;
            }, err => {
            })
        },
        setMenu : function (nId) {
            sessionStorage.setItem('nId',nId);
            window.location.reload()
        }
    },
    created: function () {
        this.init();
    }
}
</script>
<style scoped>
.menu { 
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
.menu,li {
cursor: pointer;
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
float: left;
}
.menu li span {
display:block; /* 将链接设为块级元素 */
padding:8px 50px; /* 设置内边距 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>

